<template>
  <div
    :class="['nav', { on: items.path === currentPath }]"
    v-for="items in navList"
    :key="items.name"
  >
    <q-btn class="nLi" :label="items.name">
      <q-menu
        anchor="bottom left"
        transition-show="slide-down"
        transition-hide="slide-up"
      >
        <q-list>
          <q-item
            class="nav-item"
            clickable
            v-close-popup
            v-for="(item, index) in items.children"
            :key="index"
            @click="$router.push({ path: item.path })"
          >
            <q-item-section>
              <q-item-label>{{ item.name }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { NavData } from '@/constants/constantType'

defineProps<{ navList: Array<NavData> }>()

const route = useRoute()
const currentPath = computed(() => route.matched[0].path)
</script>

<style lang="scss" scoped>
.q-btn::before {
  box-shadow: 0 0 0 0;
}
.q-list {
  width: 120px;
  background-color: rgba(5, 5, 5, 0.4);
  .nav-item {
    color: #fff;
    font-weight: bolder;
    &:hover {
      background: rgba(0, 0, 0, 0.9) !important;
    }
  }
}
</style>
<style lang="scss">
.q-menu {
  top: 90px !important;
  background: transparent;
}
</style>
